<template>
  <div class="search-list">
    <transition-group name="list" tag="ul">
      <li v-for="(item) in searchHistory" :key="item" class="search-item" @click="selectItem(item)">
        <span class="text">{{item}}</span>
        <span class="icon" @click.stop="deleteOne(item)">
          <i class="icon-delete"></i>
        </span>
      </li>
    </transition-group>
  </div>  
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters([
      'searchHistory'
    ])
  },
  methods: {
    selectItem(item) {
      this.$emit('select', item)
    },
    deleteOne(item) {
      this.$emit('delete', item)
    }
  }

}
</script>
<style lang="stylus" scoped>

.search-list
  .search-item
    display: flex
    align-items: center
    height: 40px
    overflow: hidden
    &.list-enter-active, &.list-leave-active
      transition: all 0.1s
    &.list-enter, &.list-leave-to
      height: 0
    .text
      flex: 1;
      color: hsla(0,0%,100%,.5);
    .icon
      .icon-delete
        font-size: 12px;
        color: hsla(0,0%,100%,.3);
</style>
